<template>
    <div class="contentPage">
        <div class="noPc" style="height: 6px;background: #F2F2F2;width: 100%"></div>
        <div class="mobile">
            <div class="storeTitle" v-if="params.selectName">店铺回款数据：{{params.selectName}}</div>
            <div class="search">
                <div class="searchInput" @click="params.showSelect = true">
                    <div
                        style="height: 22px;line-height: 22px;color: #969799;padding: 0 6px;font-size: 12px;display: flex;justify-content: space-between">
                        <span>{{ params.selectName || '选择店铺' }}</span>
                        <CloseCircleOutlined v-if="params.selectName" @click.stop="params.selectName = '';params.selectData = '';getList()" color="#969799"/>
                    </div>
                </div>
                <div class="searchBtn" @click="search()">搜索</div>
            </div>
            <div class="list">
                <van-pull-refresh class="listRefresh" v-model="params.loading" @refresh="onRefresh">
                    <van-list
                        v-model="params.bottomLoading"
                        :finished="params.finished"
                        style="height: 100%"
                        finished-text="没有更多了"
                        loading-text="加载中..."
                        @load="onLoad"
                    >

                        <div class="listItem" v-for="(item,index) in params.data" :key="index">
                            <!--                            <div style="font-size: 12px">{{ item.date }}</div>-->
                            <div class="itemCard">
                                <div class="line">
                                    <div>
                                        <span class="desc">日期：</span>
                                        <span>{{ item.date }}</span>
                                    </div>
                                    <div>
                                        <span class="desc">日回款金额：</span>
                                        <span>{{ item.backMoney }}</span>
                                    </div>
                                </div>
                                <div class="line">
                                    <div>
                                        <span class="desc">回款金额：</span>
                                        <span>{{ item.totalBackMoney }}</span>
                                    </div>
                                    <div>
                                        <span class="desc">平均回款金额：</span>
                                        <span>{{ item.avgBackMoney }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
                <div v-if="params.data.length <= 0" style="    text-align: center;
    padding: 20% 0;
    font-size: 12px;
    color: #7d7d7d;">暂无数据
                </div>
            </div>
        </div>
        <div class="pc">
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div class="title">
                    <span v-if="params.selectName">店铺回款数据：{{params.selectName}}</span>
                </div>
                <div class="search">
                    <div class="left">
                        <a-range-picker v-model:value="params.times" :locale="params.locale" @change="timeCgange"
                                        formata="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                        <a-select
                            :options="params.storeList"
                            :field-names="{ label: 'name', value: 'id' }"
                            @change="e=>{
                            params.selectData = e
                            params.selectName = params.storeList.find(item => item.id === e)?.name
                        }" style="width: 200px;margin-left: 12px" placeholder="店铺搜索" allowClear>
                        </a-select>
                        <div class="btn" style="background: #81d3f8;margin-left: 12px;cursor: pointer"
                             @click="getList()">
                            查询
                        </div>
                    </div>
                </div>
            </div>
            <div class="pcTableBox">
                <table class="pcTable">
                    <tbody class="pcTbody">
                    <tr>
                        <td>日期</td>
                        <td>日回款金额</td>

                        <td>累计回款金额</td>
                        <td>平均回款金额</td>
                    </tr>
                    <tr v-for="(item,index) in paginate(params.data,params.page,params.pageSize)" :key="index">
                        <td>{{ item.date }}</td>
                        <td>{{ item.backMoney }}</td>

                        <td>{{ item.totalBackMoney }}</td>
                        <td>{{ item.avgBackMoney }}</td>
                    </tr>
                    </tbody>
                </table>
                <div style="text-align: right;margin-top: 12px">
                    <a-pagination v-model:current="params.page" v-model:pageSize="params.pageSize" :total="params.data.length" @change="pageChange"/>
                </div>
            </div>
        </div>
        <van-popup v-model:show="params.showPopup" position="bottom" style="width: 100%">
            <van-date-picker
                v-model="params.currentDate"
                title="选择日期"
                @confirm="confirmDate(true)"
                @cancel="confirmDate(false)"
            />
        </van-popup>
        <van-popup v-model:show="params.showSelect" position="bottom" style="width: 100%">
            <van-picker
                show-toolbar
                :columns="params.storeList"
                @cancel="params.showSelect = false"
                @change="e=>{
                    console.log(e,'e')
                }"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>
<script setup>
import {reactive, onMounted} from 'vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getStatistics, getStoreList} from '../../api/index.js'
import {CloseCircleOutlined} from '@ant-design/icons-vue'

const params = reactive({
    locale,
    times: [],
    open: false,
    loading: false,
    bottomLoading: false,
    showCard: false,
    date: '',
    finished: false,
    showSelect: false,
    showPopup: false,
    tabsActive: 0,
    selectData: '',
    selectName:'',
    total: 0,
    page: 0,
    pageSize: 20,
    data: [],
    columns: [{
        text: '杭州'
    }],
    tabs: [
        {name: '全部', key: -1, color: '#FACD91'},
        {name: '回本期', key: 0, color: '#FACD91'},
        {name: '收益期', key: 1, color: '#CAF982'},
        {name: '已结束', key: 2, color: '#C280FF'},
    ],
    list: [],
    storeInfo: {},
    counts: {
        incom_status: 0
    },
    loginInfo: {},
    currentDate: [],
    storeList: []
})
onMounted(() => {
    getStoreList().then(res => {
        res.data.map(item=>{item.text = item.name;item.value=item.id})
        params.storeList = res.data
    })
    if (window.innerWidth > 767) {
        params.page += 1
        getList()
    }
})
const onConfirm = (e,s) => {
    console.log(e,s,'e')
    let obj = e.selectedOptions[0]
    params.selectName = obj.name
    params.selectData = obj.id
    params.showSelect = false
}
const search = () => {
    params.page = 1
    getList(true)
}
const getList = () => {
    let data = {
        page: params.page,
        pageSize: params.pageSize,
    }
    if (params.times) {
        data.beginDate = params.times[0]
        data.endDate = params.times[1]
    }
    if(params.selectData) {
        data.pmallId = [params.selectData]
    }
    getStatistics(data).then(res => {
        params.data = res.data.items
        params.bottomLoading = false
        params.loading = false
        if (params.data.length - 1 === res.data.total) params.finished = true
    })
}
const onLoad = () => {
    if (params.bottomLoading) return;
    params.bottomLoading = true
    params.page += 1
    getList()
}
const onRefresh = (done) => {
    params.page = 1
    getList()
};
const confirmDate = (e) => {
    params.showPopup = false
    params.date = params.currentDate.join('-')
    if (e) getList()
}
const pageChange = (e, s) => {
    params.page = e
    params.pageSize = s
    getList(true)
}
const paginate = (data, page, pageSize) => {
    const start = (page - 1) * pageSize; // 计算起始索引
    return data.slice(start, start + pageSize); // 返回当前页的数据
}
const timeCgange = (e, s) => {
    console.log(e, s)
}
</script>
<style scoped lang="less">
/* 小屏幕设备样式 */
@media only screen and (max-width: 767px) {
    @import './index-mobile.less';
}

/* 大屏幕设备样式 */
@media only screen and (min-width: 768px) {
    @import './index-pc.less';
    ::v-deep .van-notice-bar__content {
        height: 24px;
    }
}

::v-deep.van-notice-bar {
    height: 24px;
}
</style>
